<template>
  <div class="playlist" :style="{height}">
    <ul class="playlist-list">
      <li class="playlist-item soft white" v-touch v-for="playList in playLists" @click="gotoPlayListDetails(playList.id)">
        <div class="cover">
          <van-image round class="soft" width="4rem" height="4rem" :src="playList.coverImgUrl" />
        </div>
        <div class="playlist-info">
          <div class="title">
            <h3 class="text-ellipsis">{{playList.name}}</h3>
          </div>
          <div class="creator">
            <div class="avatar">
              <van-image round width="100%" height="100%" :src="playList.creator.avatarUrl" />
            </div>
            <p class="nickname">{{playList.creator.nickname}}</p>
          </div>
          <div class="desc">
            <v-text class="desc-text" :text="playList.description" />
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>


<style lang="scss" scoped>
.playlist{
  width: 100%;
  overflow-y:scroll;
  .playlist-list{
    .playlist-item{
      display: flex;
      width: 95%;
      margin: .8rem auto;
      padding: .5rem;
      align-items: center;
      box-sizing: border-box;

      &.touch{
        background: #eee;
      }

      .cover{
        width: 4rem;
        height: 4rem;
        padding: .5rem;
      }
      .playlist-info{
        width: 75%;
        color: #535353;
        margin-left: .5rem;

        .title ,.desc{
          width: 96%;
          .desc-text{
            font-size: 12px;
          }

        }
        .creator{
          display: flex;
          align-items: center;
          margin: .5rem 0;
          .avatar{
            width: 1.5rem;
            height: 1.5rem;
            margin-right: .2rem;
            margin-left: .1rem;
          }
          .nickname{
            font-size: 12px;
            margin-left: .5rem;
          }
        }

      }
    }
  }
}
</style>

<script setup>
import {defineProps, toRefs} from "vue";
import {useRouter} from "vue-router";

let propsDef = defineProps({
  playLists: {
    type: Array
  },
  height:{
    type:String,
    default:"100%"
  },
  loading:{
    type:Boolean
  }
});

let router = useRouter();

function gotoPlayListDetails(playlistId){
  router.push("/playlist/"+playlistId);
}

</script>

